import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
    ListItem,
    ListInfo,
    LoadMore,
} from '../style';
import { actionCreators } from '../store';

const List = (props) => {
    let { list, articlePage, getMoreList } = props;
    list = list.toJS();
    return (
        <Fragment>
            {
                list.map((item) => (
                    <Link key={item.id} to={"/detail/" + item.id}>
                        <ListItem>
                            <img className="pic" src={item.imgUrl} alt={item.title}/>
                            <ListInfo>
                                <h3 className="title">{item.title}</h3>
                                <p className="desc">{item.desc}</p>
                            </ListInfo>
                        </ListItem>
                    </Link>
                    )
                )
            }
            <LoadMore onClick={() => getMoreList(articlePage)}>
                阅读更多
            </LoadMore>
        </Fragment>
    );
};

const mapStateToProps = (state) => ({
    list: state.getIn(["home", "articleList"]),
    articlePage: state.getIn(["home", "articlePage"]),
});
const mapDispatchToProps = (dispatch) => {
    return {
        getMoreList(articlePage) {
            dispatch(actionCreators.getMoreList(articlePage));
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(List);